<script setup>
    import ercode from '../../assets/images/service/ercode.jpg'
    
    let showH5 = $ref(false)

    // 点击折叠
    const handleClickFold = () => {
        showH5 = !showH5
    }


</script>

<template>
    <div class="fold-menu fold-menu-right text flex-center"  @click="handleClickFold">
        <span>微信小程序</span>
    </div>

    <div class="h5-warp flex-center" v-if="showH5">
        <div class="h5-iframe-wrap">
            <div class="iframe-wrap">
                <div class="title">爱山东</div>
                <iframe src="https://zzrs.tengcity.com/mp/"></iframe>
            </div>
            <el-image class="ercode" :src="ercode" :preview-src-list="[ercode]" :preview-teleported="true"></el-image>
            <img src="../../assets/images/service/close.png" class="close" @click="handleClickFold">
        </div>
        
    </div>

</template>

<style lang="less" scoped>
    .fold-menu{
        position: absolute;
        top: 541px;
        right: 0;
        z-index: 9;
        width: 35px;
        cursor: pointer;
        border-radius: 8px 0px 0px 8px;
        &.text{
            height: 165px;
            background: rgba(0,53,112,0.6);
            color: #00E2FF;
            font-size: 20px;
            line-height: 24px;
            font-weight: bold;
            padding: 0 15px;
            text-align: center;
            word-break: break-all;
        }
    }

    .h5-warp{
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 99;
        background: rgba(0, 0, 0, 0.6);

        .h5-iframe-wrap{
            width: 400px;
            height: 800px;
            position: relative;

            .iframe-wrap{
                width: 100%;
                height: 100%;
                overflow: hidden;
                border-radius: 20px;
                background: #fafafa;
                position: relative;
                // box-shadow: 0 8px 12px #ebedf0;

                .title{
                    position: absolute;
                    width: 100%;
                    // height: 30px;
                    background: rgb(23, 146, 254);
                    color: #fff;
                    text-align: center;
                    padding: 12px;
                    font-size: 24px;
                }
            }

            iframe{
                width: 100%;
                height: 100%;
            }

            .ercode{
                position: absolute;
                width: 200px;
                height: 200px;
                right: -210px;
                top: 220px;
            }

            .close{
                position: absolute;
                top: -10px;
                right: -20px;
                cursor: pointer;
                width: 36px;
                height: 36px;
            }
        }
    }
</style>